<template>
  <view class="page">
    <view class="page__title">注册</view>
    <view class="page__desc">欢迎使用{{ appConfig.name }}!</view>
    <view class="page__form">
      <view class="input-box"></view>
      <view class="input-box">
        <view>
          <u-input
            v-model="formData.Name"
            font-size="32rpx"
            prefix-icon="https://ui-resourse.oss-cn-shenzhen.aliyuncs.com/picture/2022/03/28/IIwyhuVGRZJZBjim.png"
            :prefix-icon-style="{
              marginRight: '32rpx'
            }"
            placeholder="请输入姓名"
            :placeholder-style="{
              fontSize: '32rpx',
              color: '#9E9E9E'
            }"
            border="none"
          />
        </view>
        <view class="my-16px">
          <u-input
            v-model="formData.PhoneNumber"
            type="number"
            font-size="32rpx"
            prefix-icon="https://ui-resourse.oss-cn-shenzhen.aliyuncs.com/picture/2022/04/02/yugCDreSPKbjBbCI.png"
            :prefix-icon-style="{
              marginRight: '32rpx'
            }"
            placeholder="请输入手机号"
            :placeholder-style="{
              fontSize: '32rpx',
              color: '#9E9E9E'
            }"
            border="none"
          />
        </view>
        <view>
          <u-input
            v-model="formData.Department"
            font-size="32rpx"
            prefix-icon="https://ui-resourse.oss-cn-shenzhen.aliyuncs.com/picture/2022/04/02/yugCDreSPKbjBbCI.png"
            :prefix-icon-style="{
              marginRight: '32rpx'
            }"
            placeholder="您的部门"
            :placeholder-style="{
              fontSize: '32rpx',
              color: '#9E9E9E'
            }"
            border="none"
          />
        </view>
      </view>
    </view>
    <view class="mt-70rpx">
      <u-button
        text="注册"
        color="#386ee8"
        :disabled="
          !formData.PhoneNumber || !formData.Name || !formData.Department
        "
        :throttle-time="600"
        @click="handleRegister"
      />
    </view>
    <view class="page__register">
      <text>已有账号？</text>
      <text @click="GoToLogin">去登录</text>
    </view>

    <view class="page__policy">
      <text>请阅读</text>
      <text @click="handleOpen(1)">《用户协议》</text>
      &
      <text @click="handleOpen(2)">《隐私政策》</text>
    </view>
  </view>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

import { useGetPhoneNumber } from '@/hook/getPhoneNumber'
import { useGlobalSetting } from '@/settings/system'
import { appStore } from '@/store/modules'
import { buildUrl, toPromise } from '@/utils'
import { showModal, showToast } from '@/utils/helper/uniHelper'
import { registerApi } from './service'

@Component({ name: 'Register' })
export default class Register extends Vue {
  get appConfig() {
    return useGlobalSetting()
  }
  public pwdShow = false

  public showTenantSelect = false

  get defaultTenantId() {
    return appStore.initDefaultTenant
  }

  formData = {
    Name: '',
    Department: '',
    PhoneNumber: ''
  }

  onLoad() {
    uni.hideHomeButton()
  }

  async handleRegister() {
    try {
      await registerApi(this.formData)
      await showModal({
        title: '注册提示',
        content: '账户注册成功，默认登录密码为注册手机号后六位！'
      })
      this.GoToLogin()
    } catch (e) {
      console.log(e)
    }
  }

  GoToLogin() {
    const needRedirect = getCurrentPages().length <= 1

    ;(needRedirect ? uni.redirectTo : uni.navigateTo)({
      url: './login'
    })
  }

  handleOpen(type: 1 | 2 = 1) {
    showToast({
      title: '保护隐私'
    })
    // const { privacyUrl } = useGlobalSetting()
    // if (!privacyUrl.length) return

    // uni.navigateTo({
    //   url: buildUrl('/pages/webview/index', {
    //     url: privacyUrl[type - 1] ?? privacyUrl[0]
    //   })
    // })
  }
}
</script>

<style lang="scss" scoped>
.page {
  @apply min-h-screen bg-white p-50rpx text-[#9e9e9e];

  &__title {
    @apply mt-26rpx text-48rpx text-[#333];
  }

  &__desc {
    @apply mt-36rpx text-32rpx;
  }

  &__form {
    @include gap-y(70rpx);
    @apply mt-179rpx flex flex-col;
  }

  &__register {
    @apply mt-50rpx text-center text-26rpx;

    text:last-child {
      @apply text-primary;
    }
  }

  &__policy {
    @apply fixed left-0 right-0 text-center text-24rpx;
    bottom: calc(44rpx + $bs-height);

    text:not(:first-child) {
      @apply text-primary;
    }
  }
}

.input-box {
  @apply pb-16rpx;
  border-bottom: 2rpx solid #f6f6f6;
}
</style>
